<template>
  <div class="list-container">
    <!-- 月考勤统计 -->
    <el-form class="search-panel" v-model="sercchData" :inline="true">
      <el-form-item class="search-time" label="考勤时间：" prop="time">
        <el-date-picker
          style="width: 250px"
          v-model="sercchData.startToEnd"
          type="monthrange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="考勤表状态：">
        <el-select v-model="sercchData.status" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="统计方式：">
        <el-select v-model="sercchData.mode" placeholder="请选择">
          <el-option
            v-for="item in modeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="width: 100px; text-align: right">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <!-- <el-table-column width="42" align="center" type="selection">
        </el-table-column> -->
        <el-table-column type="index" align="center" width="55" label="序号">
        </el-table-column>
        <el-table-column prop="time" label="考勤时间" align="center">
        </el-table-column>
        <el-table-column
          prop="attendancePersonNum"
          label="考勤人数"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column label="考勤表状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">未确认</div>
            <div v-else-if="scope.row.status == 1">确认</div>
            <div v-else-if="scope.row.status == 2">班组长已确认</div>
            <div v-else-if="scope.row.status == 3">异议</div>
          </template>
        </el-table-column> -->
        <el-table-column prop="mode" label="统计方式" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.mode == 1">打卡机获取</div>
            <div v-else-if="scope.row.mode == 2">人工导入</div>
            <div v-else-if="scope.row.mode == 3">人工+打卡机获取</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="checkRow(scope)"
              type="text"
              icon="el-icon-search"
              >查看</el-button
            >
            <!-- <el-button
              :ref="'btn'+scope.$index"
              @click.native.prevent="confirmRow(scope)"
              type="text"
              icon="el-icon-circle-check"
              :disabled="scope.row.time == date"
              >确认</el-button
            > -->
            <el-button
              :ref="'btn'+scope.$index"
              @click.native.prevent="dailyexport(scope.row)"
              type="text"
              icon="el-icon-download"
              >导出</el-button
            >
            <!-- <el-button
              @click.native.prevent="deleteRow(scope)"
              type="text"
              icon="el-icon-delete"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  monthlyAttendanceStatisticList,
  deleteMonthAttendanceStatistics,
  dailyExport
} from "@/api/attendance.js";
import store from '../../../../store'
export default {
  data() {
    return {
      sercchData: {
        startToEnd: null,
        status: -1,
        mode: -1,
      },
      statusOptions: [
        { value: -1, label: "全部" },
        { value: 0, label: "未确认" },
        { value: 1, label: "已确认" },
        { value: 2, label: "班组长已确认" },
        { value: 3, label: "异议" },
      ],
      modeOptions: [
        { value: -1, label: "全部" },
        { value: 1, label: "打卡机" },
        { value: 2, label: "人工导入" },
        { value: 3, label: "打卡机+人工导入" },
      ],
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      tableData: [],
      date:null,
    };
  },
  created() {
    // console.log(sessionStorage.getItem("projectId"))
    var dd = new Date()
    var y= dd.getFullYear()
    var m= dd.getMonth()+1
    if(m<10) m = '0'+m
    this.date=y+'-'+m
    this.getStatisticList();
  },
  methods: {
    dailyexport(row){
      console.log(row.time);
      console.log(typeof(row.time));
      dailyExport({date:row.time}).then(res=>{
        let blob = new Blob([res]);//response.data为后端传的流文件
        console.log(blob);
        console.log(res.data);
        let downloadFilename = row.time+"考勤人员表.xlsx";//设置导出的文件名  用moment时间插件对文件命名防止每次都是一样的文件名
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        //兼容ie浏览器
          window.navigator.msSaveOrOpenBlob(blob)
        }else {
        //谷歌,火狐等浏览器
          let url = window.URL.createObjectURL(blob);
          let downloadElement = document.createElement("a");
          downloadElement.style.display = "none";
          downloadElement.href = url;
          downloadElement.download = downloadFilename;
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(url);
        }
      }).catch(function (err) {
        this.$message.error(err)
        console.log(err)
      }).finally(function () {
          // this.tableLoading = false;
      })
    },
    onSubmit() {
      // console.log(this.sercchData.startToEnd)
      this.getStatisticList();
    },
    getStatisticList() {
      monthlyAttendanceStatisticList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        mode: this.sercchData.mode == -1 ? null : this.sercchData.mode,
        startTime:
          this.sercchData.startToEnd == null
            ? null
            : this.sercchData.startToEnd[0].toString().substr(0, 15),
        endTime:
          this.sercchData.startToEnd == null
            ? null
            : this.sercchData.startToEnd[1].toString().substr(0, 15),
          projectId:localStorage.getItem('projectId'),
      }).then((res) => {
        // console.log(res)
        this.tableData = res.data.data.records;
        this.totalData = res.data.data.total;
      });
    },
    generateMAttendance() {},
    handleSelectionChange() {},
    handleSizeChange(val) {
      this.pageSize = val;
      this.getStatisticList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getStatisticList();
    },
    checkRow(res) {
      console.log(res)
      this.$router.push({
        path: "/attendance/month/list",
        query: { date: res.row.time },
      });
    },
    deleteRow(res) {
      deleteMonthAttendanceStatistics({
        date: res.row.time,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        this.tableData = res.data.data.records;
        this.totalData = res.data.data.total;
        this.$message({
          type: "success",
          message: "删除成功！",
        });
      });
    },
    confirmRow(res){
      console.log(res);
      this.$router.push({
        path: "/attendance/month/confirm",
        query: { date: res.row.time },
      });
    //   this.$confirm(
    //     "是否确认 " + res.time + " 的考勤?",
    //     "月考勤确认",
    //     {
    //       confirmButtonText: "确认",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     }
    //   )
    //     .then(() => {
    //       // this.$refs.res.time.disabled = true
    //       // confirmAttendance({
    //       //   date:this.searchForm.date,
    //       //   personId:res.personId
    //       // }).then(e=>{
    //         this.$message({
    //         type: "success",
    //         message: "确认考勤成功!",
    //       });
    //       this.$refs[`btn${index}`].disabled = true
    //       // this.getTableData()
    //       // })
          
    //       // this.$router.push("/attendance/month/detail");
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消确认",
    //       });
    //     });
    },
  },
};
</script>